import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/login/login.vue'
import Layout from '../views/layout/layout.vue'
import Images from '../views/images/images.vue'
import Articles from '../views/articles/articles.vue'
import Home from '../views/home/home.vue'
// import Edit from '../views/articles/edit.vue'
import Edit from '@/views/articles/edit.vue'
import AddArticle from '@/views/articles/addArticle.vue'
import Comments from '@/views/comments/comments.vue'
import Fans from '@/views/fans/fans.vue'
import Settings from '@/views/settings/settings.vue'
// @， 是一个别名，表示src目录。 这个功能是webpack提供的。
Vue.use(VueRouter)

const router = new VueRouter({
  // 配置路由
  routes: [
    // 登陆
    { path: '/login', component: Login },
    // 主页
    {
      path: '/',
      component: Layout,
      children: [
        // path: '', 相当于是默认显示的页面
        { path: '', component: Home },
        { path: '/articles', component: Articles },
        // 素材管理
        { path: '/image', component: Images },
        // 动态路由。它会匹配所有/edit/xxxxxx的格式
        { name: 'edit', path: '/edit/:id', component: Edit },
        { path: '/addArticle', component: AddArticle },
        // 评论管理
        { path: '/comment', component: Comments },
        // 粉丝管理
        { path: '/fans', component: Fans },
        // 个人设置
        { path: '/settings', component: Settings }

        // { path: '/edit', component: Edit }
      ]
    }
  ]
})

// 路由导航守卫
//     只要是发生了路由的跳转（还没有进入到目标路由的页面），就会执行这个回调
// to: 要跳入的路由信息。  你要去哪里
// from: 要跳出的路由信息。你从哪里来
// next: 是一个函数，放行方法
//   - next() : 正确跳转。允许进入到 to 路由
//   - next(路由地址) : 不允许去to，而转去指定的路由地址
// 如果没有调用next()，则页面就不能正常显示了

const vipPages = ['/', '/articles', '/images', '/login123']
router.beforeEach((to, from, next) => {
  // 所有路由跳转都会进入这个函数
  const tokenStr = localStorage.getItem('tokenStr')
  // 1. 有些页面是必须要登陆之后才能访问的
  console.log('路由变化了, 从', from.path, '去到', to.path)
  // if( 你要去的页面是在vipages中 并且你又没有token) {
  // includes: 数组的一个方法，用来判断一个元素是否在数组中存在
  if (vipPages.includes(to.path) && !tokenStr) {
    console.log('没有登陆，是不是访问vip的')
    next('/login')
  } else if (to.path === '/login' && tokenStr) {
  // if( 你要去的页面/是login 并且你又有token) {
    next('/')
  } else {
    next()
  }
})

export default router

// {
//   path: '/about',
//   name: 'About',
//   // route level code-splitting
//   // this generates a separate chunk (about.[hash].js) for this route
//   // which is lazy-loaded when the route is visited.
//   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// }
